<template>
  <div id="browse">
    <div id="canvas"></div>
    <div class="zoom">
      <div class="plus"
           v-on:click="plus">+</div>
      <div class="recover"
           v-on:click="recover">〇</div>
      <div class="minus"
           v-on:click="minus">-</div>
    </div>
    <!-- 视频 -->
    <el-dialog :visible.sync="openVideo"
               width="70%"
               class="videoClass"
               @close="handleClose">
      <video style="width:100%;height:100%"
             :src="videoUrl"
             autoplay="autoplay"
             controls="controls"></video>
    </el-dialog>
    <!-- 音频 -->
    <el-dialog :visible.sync="openAudio"
               width="350px"
               @close="handleClose">
      <audio width="100%"
             height="100%"
             :src="Audio"
             autoplay="autoplay"
             controls="controls"></audio>
    </el-dialog>

    <!-- 图片 -->
    <el-dialog :visible.sync="openImage"
               width="70%"
               @close="handleClose">

      <el-image :src="image"
                style="width:100%"></el-image>
    </el-dialog>
    <!-- 文本 -->
    <el-dialog :visible.sync="openText"
               width="70%"
               :modal="false"
               :close-on-click-modal="false"
               ref="textDialog"
               @close="handleClose">
      <div class="textWrap"
           v-html="text"></div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data () {
    return {
      graph: new joint.dia.Graph(),
      paper: new joint.dia.Paper(),
      openVideo: false,
      openAudio: false,
      openImage: false,
      openText: false,
      videoUrl: "",
      Audio: "",
      image: "",
      text: "",
      el: "",
      scaleSun: 1,
      cellViewX: 0,
      cellViewY: 0,
      originX: 0,
      originY: 0,
    };
  },
  created () {
  },
  mounted () {
    this.el = $("#browse");
    this.getData();
    $('.el-main').css('overflow', 'auto')
  },
  methods: {

    getData () {
      let _this=this
      this.axios
        .get("/pmph/action/flowChartAction/selectDetailById", {
          params: {
            id: this.$route.query.id,
            status: this.$route.query.status
          },
        })
        .then((response) => {
          this.init(response.data.chartJson);
          if (!_this.IsPC()) {
            let W = $(window).width();
            let tw = response.chartJson.width
            console.log(W);
            this.scaleSun = W / tw
            this.paper.scale(W / tw);
          }
        })
    },
    init (data) {
      this.graph = new joint.dia.Graph();
      this.paper = new joint.dia.Paper({
        el: $("#canvas"),
        width: data.width,
        height: data.height,
        gridSize: 1,
        background: {
          color: data.color,
          image: data.imageUrl,
          size: {
            width: data.width,
            height: data.height,
          },
        },
        model: this.graph,
        interactive: false,
        async: true,
        linkPinning: false, // 连线必须连到某个元素，即不允许连到空白处
        snapLinks: {
          radius: 25, // 距离元素连接点25像素时自动连接上
        },
        defaultRouter: {
          name: "orthogonal",
        },
        perpendicularLinks: true,
        restrictTranslate: true, //设定元素不能拖出画布
      });
      this.paper.on({
        // 点击元素事件
        "cell:pointerdown": (cellView, evt, x, y) => {
          var cell = cellView.model;
          if (cell.get("attrs").root.incident == "视频") {
            this.openVideo = true;
            this.videoUrl = this.setUrl(cell.get("attrs").root.incidentData);
          }
          if (cell.get("attrs").root.incident == "音频") {
            this.openAudio = true;
            this.Audio = this.setUrl(cell.get("attrs").root.incidentData);
          }
          if (cell.get("attrs").root.incident == "图片") {
            this.openImage = true;
            this.image = this.setUrl(cell.get("attrs").root.incidentData);
          }
          if (cell.get("attrs").root.incident == "文本") {
            this.openText = true;
            this.text = cell.get("attrs").root.incidentData;
            let dialogWidth = cell.get("attrs").root.dialogWidth;
            let dialogHeight = cell.get("attrs").root.dialogHeight;
            let dialogColor = cell.get("attrs").root.dialogColor;
            this.openText = true;
          }
        },
        "blank:pointerdown": (cellView) => {
          this.cellViewX = $('#browse').scrollTop()
          this.cellViewY = $('#browse').scrollLeft()
          this.originX = cellView.pageX
          this.originY = cellView.pageY
        },
        "blank:pointermove": (cellView) => {
          let x = cellView.pageX
          let y = cellView.pageY
          let newX = x - this.originX + this.cellViewX
          let newY = y - this.originY + this.cellViewY
          $('#browse').scrollLeft(newX)
          $('#browse').scrollTop(newY)

        }
      });
      this.graph.fromJSON(JSON.parse(data.json));
    },
    // 判断端
    IsPC () {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    handleClose () {
      this.videoUrl = "";
      this.Audio = "";
      this.image = "";
      this.text = "";
    },
    // 放大缩小
    plus () {
      this.scaleSun += 0.1
      if (this.scaleSun <= 1) {
        this.paper.scale(this.scaleSun);
      } else {
        this.scaleSun = 1
        this.$message('已经最大了');
      }
    },
    minus () {
      this.scaleSun -= 0.1
      if (this.scaleSun >= 0.1) {
        this.paper.scale(this.scaleSun);
      } else {
        this.scaleSun = 0.1
        this.$message('已经最小了');
      }

    },
    recover () {
      this.scaleSun = 1
      this.paper.scale(this.scaleSun);
    },
    // 添加host
    setUrl (data) {
      var protocol = window.location.protocol;
      var host = window.location.host;
      var port = window.location.port;

      if (host.indexOf('127.0.0.1') != -1 || host.indexOf('192.168.137.1') != -1) {
        host = '192.168.107.204:8089'
      }

      var url = protocol + '//' + host + data

      return url
    }
  },
};
</script>
<style scoped lang="scss">
#browse {
  width: 100%;
  height: calc(100vh);
  overflow: scroll;
  margin: 0 auto;
}
.textWrap {
  width: 100%;
  height: calc(100vh - 100px);
  overflow: auto;
}
.joint-paper {
  margin: 0 auto;
  overflow: auto;
}
.zoom {
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 20px;
}
.zoom div {
  background: rgba(216, 216, 216, 0.4);
  padding: 15px;
  text-align: center;
  cursor: pointer;
}
.zoom .plus {
  border-radius: 10px 10px 0 0;
}
.zoom .minus {
  border-radius: 0 0 10px 10px;
}
.zoom .recover {
  border-top: 1px solid rgba(226, 226, 226, 0.4);
  border-bottom: 1px solid rgba(226, 226, 226, 0.4);
}
</style>
<style lang="scss">
#browse{
  .el-dialog__body {
  font-size: medium;
  word-break:normal;
  }

  .el-dialog__header {
    padding: 0 0 0 0;
  }

  .el-dialog__headerbtn {
    z-index: 10;
  }

   .ql-size-huge {
    font-size: 2.5em;
  }
 .ql-size-large {
      font-size: 1.5em;
  }
  .ql-snow .ql-editor h1 {
    font-size: 2em;
  }
 .ql-size-small {
      font-size: 0.75em;
  }
}
</style>
